<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="../js/template-web.js"></script>
    <script src="../js/treeTable.js"></script>

    <script>
        var data = [
            {id:1,parentid:0,name:"江西"},
            {id:2,parentid:0,name:"广东"},
            {id:3,parentid:1,name:"南昌"},
            {id:4,parentid:2,name:"广州"}];

        $(function() {


            $('#main_tbody').treeTable({
                data: data
                , getTr: function (trModel/* 行数据 */, level/* 行级别 */, isclose/* 是否是关闭状态 */) {
                    //模板引擎自定义生成tr html
                    var html = template("tem_tr", {data: trModel, level: level, isclose: isclose});
                    return html;
                }
                , buildTree: {
                    idKey: "id"//对应数据id的key
                    , pidKey: "parentid"//对应数据父id的key
                    , rootVal: 0
                }
            });


        })




    </script>
</head>
<body>

<table id ="mainTable"  class="table_list table table-bordered" style="margin-top: 20px;">
    <thead>
    <tr>
        <th><input type="checkbox" id="select" /></th>
        <th data-field="id">ID</th>
        <th data-field="name">栏目名称</th>
        <th data-field="img">分类图片</th>
        <th data-field="contentType">内容类型</th>
        <th data-field="status">状态</th>
        <th data-field="sort">排序</th>
        <th data-field="operator" data-formatter="operatorFormatter">操作</th>
    </tr>
    </thead>
    <tbody id="main_tbody">
    </tbody>
</table>

</body>
<script type="text/html" id="tem_tr">
    <tr >
        <td class="bs-checkbox">
            <input data-id="{{data.id}}"  name="btSelectItem" type="checkbox" onchage="" value={{data.id}}>
        </td>
        <td>
            {{data.id}}
        </td>
        <td style="text-align: left;padding-left:{{level*20+10}}px">
            {{if level!=0}}  └─{{/if}}
            {{if data.childs&&data.childs.length>0}}
            <span onclick="$('#main_tbody').data('treeTable').switchItem('{{data.id}}')" >
                {{if isclose}}+{{else}}-{{/if}}

            </span>
            {{/if}}
            <span>{{ data.name}}</span>
        </td>

        <td>
            {{if data.img==null}}<img src ="images/sys/logo_icon.png" style="width:50px;height:50px;" alt=""/>{{/if}}
            {{if data.img!=null}}<img src ="{{data.img}}" alt="" style="width:50px;height:50px;"/>{{/if}}
        </td>

        <td>
            {{if data.contentType==1}}图文{{/if}}
            {{if data.contentType==2}}视频{{/if}}
            {{if data.contentType==3}}文件{{/if}}
            {{if data.contentType==4}}图文/视频{{/if}}
            {{if data.contentType==5}}图文/视频/文件{{/if}}
        </td>

        <td style="" id="stateid">
            {{if data.status==1}}<span class="label label-success label-lg">启用</span>{{/if}}
            {{if data.status==2}}<span class="label label-danger arrowed">禁用</span>{{/if}}
        </td>

        <td>
            {{if data.sort!=null}}{{data.sort}}{{/if}}
            {{if data.sort==null}}{{0}}{{/if}}
        </td>

        <td style="">
            <div class="btn-group">
                <button class="btn btn-info btn-round btn-sm" onclick="toAddChild({{data.id}});"><i class="glyphicon glyphicon-plus"></i> 添加子分类</button>&nbsp;&nbsp;
                <button class="btn btn-warning btn-round btn-sm" onclick="editById({{data.id}});"><i class="glyphicon glyphicon-pencil"></i> 修改</button>&nbsp;&nbsp;
                <button class="btn btn-danger btn-round btn-sm" onclick="toRemove({{data.id}})"><i class="glyphicon glyphicon-trash"></i> 删除</button>
            </div>
        </td>
    </tr>



</script>
</html>